/**
 *用来设置boxLine，即外面的蓝色框框
 */

interface State {
  aimDom: {
    style?: { [organName: string]: string };
    context?: { value: string; type: string };
    faPosition?: { top: number; left: number };
    [organName: string]: any;
  }; //目标DOM节点
  aimPath: {}[]; //目标路径
  aimAttrs: {
    context?: string;
    goto?: { type: string; value: string };
    [organName: string]: any;
  }; //目标属性
  aimBox: { attrs?: { class: string } }; //目标容器
  aimXY: {}; //鼠标与组件的偏移
  componentList: { [organName: string]: {} };
  seniorBoxList: {};
  //为了可以显示margin...
  colorDomStyle: {
    width: string;
    height: string;
    top: string;
    left: string;
    padding: string;
    border: string;
    margin: string;
  };
  judgeColorDom: boolean;
  domStack: {
    type: string;
    pageName: string;
    data: (string | number | {})[];
    path: {}[][];
  }[]; //存储栈
  domStackNum: number; //存储栈控制下标
  page?: {
    tree: {
      [organName: string]: [];
    };
  };
}

export default function store_dragenter(
  state: State,
  {
    e,
    that,
  }: {
    e: { target: any; path: {}[]; preventDefault: Function };
    that: { $searchDom: Function; pageName: string };
  }
) {
  // 判断目标容器是不是规范的
  if (
    !["fixedBox", "freeBox", "colBoxItem", "seniorBoxItem"].includes(
      e.target.getAttribute("data-type")
    )
  )
    return;

  /**
   * 清理boxLine
   * 因为子元素先触发enter事件，父元素再触发out事件
   * 防止有两个boxLine--把原来的清理
   */
  if (state.aimBox.attrs) {
    state.aimBox.attrs.class = state.aimBox.attrs.class.replace(" boxLine", "");
  }

  // 找到目标容器组件
  state.aimBox = that.$searchDom(
    state.page?.tree[that.pageName],
    e.path.slice(0, -6).reverse(),
    false
  );

  // 然后再添加boxLine
  if (state.aimBox.attrs) {
    state.aimBox.attrs.class = `${state.aimBox.attrs.class} boxLine`;
  }

  e.preventDefault();
}
